<script setup lang="ts">
import { provide, ref } from 'vue'
import {
  NNotificationProvider,
  NDialogProvider,
  NSpin,
  useNotification
} from 'naive-ui'
import { RouteRecordRaw } from 'vue-router'

defineProps<{
  routes: RouteRecordRaw[]
}>()
const notification = useNotification()
const showSpin = ref(false)
const spinMessage = ref('')

provide('setSpin', (enable: boolean, message?: string) => {
  spinMessage.value = message || ''
  showSpin.value = enable
})
/** 错误警告窗实例 */
let errorNotification: { destroy: () => void }

defineExpose({
  errorHandler (err: Any, _vm?: Any) {
    showSpin.value = false
    errorNotification?.destroy()
    errorNotification = notification.error({
      duration: 3500,
      title: '系统错误',
      content: err.message || err.toString?.() || err
    })
    console.error(err)
  }
})
</script>

<template>
  <n-spin :show="showSpin">
    <template #description>
      {{ spinMessage }}
    </template>
    <n-notification-provider placement="top-right">
      <n-dialog-provider>
        <router-view v-slot="{ Component }">
          <component class="page" :is="Component"></component>
        </router-view>
      </n-dialog-provider>
    </n-notification-provider>
  </n-spin>
</template>

<style lang="less">
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  user-select: none;
  font-size: 16px;
}

#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.container {
  height: 1000vh;
}

.n-config-provider {
  width: 100%;
  height: 100%;
  overflow: hidden;

  &>.n-element>.n-spin-container {
    width: 100vw;
    height: 100vh;
    overflow: hidden;

    .n-spin-content {
      width: 100vw;
      height: 100vh;
      overflow: hidden;
    }
  }
}

.page {
  width: 100%;
  height: 100%;
}

.n-dynamic-tags button {
  --n-border-hover: 1px solid #4098fc !important;
  --n-border-focus: 1px solid #4098fc !important;
}

.n-base-selection {
  --n-border-hover: none !important;
  --n-box-shadow-active: none !important;
}

.n-input textarea,
.n-input input,
.n-base-selection input {
  caret-color: #4098fc !important;
}

.n-upload {
  --n-dragger-border-hover: 1px dashed #4098fc !important;
}

.n-dynamic-tags button {
  --n-text-color-hover: #4098fc !important;
}

.n-card-header {
  --n-padding-top: 12px !important;
  --n-padding-bottom: 13px !important;
  --n-padding-left: 15px !important;

  .n-card-header__extra {
    cursor: pointer;
  }
}

.n-menu-item-content {
  padding: 5px 0;
}

.n-menu-item-content::before {
  left: 0 !important;
  right: 0 !important;
}

:deep(.n-card) {
  .n-card__footer {
    .n-button--default-type {
      margin-right: 20px !important;
    }
  }
}

.n-card>.n-card__content {
  padding: 0px 70px 30px;
}
</style>
